<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%@ taglib uri="/struts-tags" prefix="s"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <base href="<%=basePath%>">
    <script type="text/javascript" src="<c:url value="/js/d3.tip.js" />" charset="utf-8"></script>
     <%@include file="/jsp/common/jspCommonHeadSetting.jsp"%>
   <title>network</title>
  </head>
<style>

body {
  font: 10px sans-serif;
}
rect:hover{  
    fill :green;  
    }
.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}
.x.axis path {
  display: none;
}
.div{
text-align:center;
}
</style>
<body>
<div class="div">
<h2>节点度分度</h2>
</div>
<script>

var margin = {top: 20, right: 80, bottom: 30, left: 50},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var barWidth = Math.floor(width / 19) - 15;

var x = d3.scale.ordinal()
   .rangeRoundBands([0,width],0.05); 

var y = d3.scale.linear()
    .range([height, 0]);
	
var color = d3.scale.category10();

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left");

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
	

d3.csv("${requestScope.filePath }",function(error, data) {
   data.forEach(function(d) {
      d.key = +d.key;
      d.value = +d.value;
  });
  
  x.domain(d3.range(data.length));
  y.domain([0, d3.max(data, function(d) { return d.value; })]);
	 
	 //绘制矩形条 
   svg.selectAll("rect")
      .data(data)
      .enter()
	  .append("rect")
      .attr("x", function(d, i) {/*-barWidth / 2*/
                    return x(i);  
               }) 
	  .transition()// 加上过渡动画   
	  .delay(function(d,i){  
			return  i/data.length*2000;  
		})//指定过度什么时间开始，可以用函数控制每一条的动画时间，这样就可得到钢琴版的效果  
	  .duration(2000)// 加上动画的持续时间，以毫秒计算  
	  .ease("linear")// 缓动函数：有circle（加速）elastic（伸缩），linear（匀速），bounce（弹跳） 
      .attr("width", barWidth)
      .attr("height", function(d) { return height - y(d.value); })
      .attr("y", function(d) { return y(d.value); })
      .attr("fill", function() {
	  return "hsl(" + Math.random() * 360 + ",100%,50%)";
	});
	//添加text文本
	 svg.selectAll(".rect")
      .data(data)
      .enter()
	  .append("text")
	  .transition()// 加上过渡动画   
	  .delay(function(d,i){  
			return  i/data.length*2000;  
		})//指定过度什么时间开始，可以用函数控制每一条的动画时间，这样就可得到钢琴版的效果  
	  .duration(2000)// 加上动画的持续时间，以毫秒计算  
	  .ease("linear")// 缓动函数：有circle（加速）elastic（伸缩），linear（匀速），bounce（弹跳） 
      .text(function(d) {  
			return d.value;  
	   })  
	   .attr("text-anchor", "middle")  
	   .attr("x", function(d, i) {  
			return x(i)+x.rangeBand()/2;  
	   })  
	   .attr("y", function(d) {  
			return y(d.value) ;  
	   })  
	   .attr("font-family", "sans-serif")  
	   .attr("font-size","11px" )  
	   .attr("fill", "black");

  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);

  svg.append("g")
      .attr("class", "y axis")
      .call(yAxis)
      .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
	  .attr("font-size","11px" )
      .text("number");

});

</script>
</body>    
</html>
